<!DOCTYPE html>
<html lang="zh">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>常见html登录注册之一-基本弹窗</title>
 <style>
  /* 公共css-开始 */
  body {
   background-color: #dedede;
   margin: 0;
   color: #333;
  }


  ul {
   list-style: none;
   padding: 0;
  }

  a {
   text-decoration: none;
   color: #333;
  }

  h1,
  p {
   margin: 0;
  }

  .blank-section {
   height: 100px;
   width: 100px;
  }

  /* 公共css-结束 */
  /* 左logo-开始 */
  header {
   width: 100%;
   height: 75px;
   background-color: #ffffff;
   -webkit-box-shadow: 0px 5px 5px 0px rgb(71 96 158 / 26%);
   -moz-box-shadow: 0px 5px 5px 0px rgb(71 96 158 / 26%);
   box-shadow: 0px 5px 5px 0px rgb(71 96 158 / 26%);
  }

  .topMenu {
   width: 1366px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 200px 1fr 200px;
   gap: 20px;
   place-content: center;
   height: 75px;

  }

  .topMenu a:hover {
   color: rgb(82, 104, 186);
   font-weight: bolder;
  }

  .topMenu a:active {
   opacity: 0.7;
   font-weight: bold;
  }

  .topMenu .left img {
   width: 50px;
   height: 50px;
   border-radius: 5px;
  }

  .topMenu .middle .menu-list {
   display: grid;
   grid-template-columns: repeat(4, 120px);
   place-items: center;
  }

  .topMenu .right .login-list {
   display: grid;
   grid-template-columns: 1fr 20px 1fr;
   place-items: center;
  }

  /* 左logo-结束 */

  /* 弹窗css */
  /* 样式文件：style.css */

  /* 弹窗背景 */
  .modal {
   display: none;
   /* 默认隐藏 */
   position: fixed;
   /* 固定位置 */
   z-index: 1;
   /* 位于顶层 */
   left: 0;
   top: 0;
   width: 100%;
   /* 宽度100% */
   height: 100%;
   /* 高度100% */
   overflow: auto;
   /* 如果需要滚动条 */
   background-color: rgb(0, 0, 0);
   /* 背景色 */
   background-color: rgba(0, 0, 0, 0.4);
   /* 背景色（带有透明度） */
  }

  .mb-10 {
   margin-bottom: 10px;
  }

  .mb-40 {
   margin-bottom: 40px;
  }

  /* 弹窗内容 */
  .modal-content {
   border-radius: 10px;
   background-color: #fefefe;
   margin: 15% auto;
   /* 15% 从上面开始，并水平居中 */
   padding: 20px;
   border: 1px solid #888;
   width: 400px;
   /* 可以调整宽度 */
  }

  .modal-content h2 {
   text-align: center;
   font-weight: normal;
  }

  .modal-content form {
   padding: 0 20px;
   box-sizing: border-box;
  }

  .modal-content form input {
   padding: 8px 5px;
   box-sizing: border-box;
   width: 100%;
  }

  .modal-content form button {
   width: 100%;
   height: 48px;
   background-color: rgb(82, 104, 186);
   color: #fff;
   box-shadow: none;
   border: none;
   border-radius: 5px;
  }

  .modal-content form button:hover,
  .modal-content form button:active {
   opacity: 0.7;
  }

  /* 关闭按钮 */
  .close {
   color: #aaa;
   float: right;
   font-size: 28px;
   font-weight: bold;
  }

  .close:hover,
  .close:focus {
   color: black;
   text-decoration: none;
   cursor: pointer;
  }

  /* 表单样式 */
  form {
   margin-top: 20px;
  }

  form label,
  form input,
  form button {
   margin-bottom: 10px;
  }

  form label {
   display: block;
  }

  /* 第三方登录按钮 */
  #wechatLogin,
  #qqLogin,
  #xiaohongshuLogin {
   /* 添加所需样式 */
  }

  /* 注册跳转链接样式 */
  #goToRegister {
   color:rgb(82, 104, 186) ;
   text-decoration: none;
   cursor: pointer;
  }

  /* 弹窗-结束 */

  .line-with-text {
   text-align: center;
   position: relative;
   margin: 5px 20px;
  }

  .line-with-text span {
   background: #fff;
   /* 与背景色相同 */
   padding: 0 10px;
   position: relative;
   z-index: 1;
   color: #a7a7a7;
  }

  .line-with-text:before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   width: 100%;
   height: 1px;
   background: #a7a7a7;
   /* 线的颜色 */
   z-index: 0;
  }
  .loginWith {
   text-align: center;
   margin-top: 20px;
  }
  .loginWith p {
   margin: 10px;
  }
  .loginWithList img {
   width: 45px;
   height: 45px;
  }
  .text-align_right {
   text-align: right;
  }
  .text-align_right a {

  }
 </style>
</head>

<body>
 <!--左logo 中 菜单 右 登录|注册 -->
 <header>
  <div class="topMenu">
   <div class="left">
    <img src="https://pic.imgdb.cn/item/65904693c458853aef2079a1.png" alt="网站logo-松蕴大胖">
   </div>
   <div class="middle">
    <ul class="menu-list">
     <li>
      <a class="active" href="#">首页</a>
     </li>
     <li>
      <a href="#">新闻中心</a>
     </li>
     <li>
      <a href="#">服务项目</a>
     </li>
     <li>
      <a href="#">关于我们</a>
     </li>
    </ul>
   </div>
   <div class="right">
    <ul class="login-list">
     <li><a href="javascript:void(0);" id="loginBtn">登录</a></li>
     <li>|</li>
     <li><a href="javascript:void(0);" id="registerBtn">注册</a></li>
    </ul>
   </div>
  </div>

 </header>
 <!--左logo 中 菜单 右 登录|注册 -结束 -->

 <!-- 弹窗 -->
 <!-- 登录弹窗 -->
 <div id="loginModal" class="modal">
  <div class="modal-content">
   <span class="close">&times;</span>
   <h2>欢迎回来</h2>
   <!-- 登录表单 -->
   <form action="/login" method="post">
    <label for="username">账户：</label>
    <input class="mb-10" type="text" id="username" name="username" required>

    <label for="password">密码：</label>
    <input class="mb-40" type="password" id="password" name="password" required>
    <button type="submit">登录</button>
   </form>

   <div class="line-with-text">
    <span>或者</span>
   </div>
   <div class="loginWith">
    <p>使用第三方账号登录</p>
    <div class="loginWithList">
      <img src="imgs/wechat.png" alt="">
      <img src="imgs/qq.png" alt="">
      <img src="imgs/xhs.png" alt="">
    </div>
   </div>

   <p class="text-align_right">还没有账号？<a href="#registerModal" id="goToRegister">立即注册</a></p>
  </div>
 </div>

 <!-- 注册弹窗 -->
 <div id="registerModal" class="modal">
  <div class="modal-content">
   <span class="close">&times;</span>
   <h2>注册</h2>
   <!-- 登录表单 -->
   <form action="/login" method="post">
    <label for="username">账户：</label>
    <input class="mb-10" type="text" id="username" name="username" required>

    <label for="password">密码：</label>
    <input class="mb-40" type="password" id="password" name="password" required>
    <button type="submit">注册</button>
   </form>

   <div class="line-with-text">
    <span>或者</span>
   </div>
   

   <p class="text-align_right">已有账号？<a href="#loginModal" id="goToRegister">立即登录</a></p>
  </div>
 </div>
 <script>
  // 脚本文件：script.js

  // 获取模态框元素
  var loginModal = document.getElementById("loginModal");
  var registerModal = document.getElementById("registerModal");

  // 获取链接元素
  var loginBtn = document.getElementById("loginBtn");
  var registerBtn = document.getElementById("registerBtn");

  // 获取 <span> 元素，用于关闭模态框
  var spans = document.getElementsByClassName("close");

  // 点击链接打开登录模态框
  loginBtn.onclick = function () {
   loginModal.style.display = "block";
  }

  // 点击链接打开注册模态框
  registerBtn.onclick = function () {
   registerModal.style.display = "block";
  }

  // 点击 <span> (x), 关闭模态框
  for (var i = 0; i < spans.length; i++) {
   spans[i].onclick = function () {
    this.parentElement.parentElement.style.display = "none";
   }
  }

  // 点击窗口外区域关闭模态框
  window.onclick = function (event) {
   if (event.target == loginModal) {
    loginModal.style.display = "none";
   } else if (event.target == registerModal) {
    registerModal.style.display = "none";
   }
  }

  // 注册链接
  var goToRegister = document.getElementById("goToRegister");

  // 点击注册链接，切换到注册弹窗
  goToRegister.onclick = function () {
   loginModal.style.display = "none";
   registerModal.style.display = "block";
  }

 </script>


</body>

</html>